

// 该文件进行标签页的切换
function initSwitchTab() {
    //1. 获取到相关的元素(标签页的按钮，会话列表，好友列表)
    let tabSession = document.querySelector('.table .tab-session');
    let tabFriend = document.querySelector('.table .tab-friend');
    // 因为list有两个，所以返回的是数组
    let lists = document.querySelectorAll('.list');
    // [0]就是回话列表 [1] 就是好友列表

    //2.针对标签页按钮，注册点击事件

    //如果是点击会话标签按钮，就把会话标签按钮的背景图片显示出来
    //同时把会话列表显示出来，把好友列表隐藏

    //如果点击好友标签按钮，就把好友标签按钮的背景图片显示出来
    //同时把好友列表显示出来，把会话列表隐藏

    tabSession.onclick = function () {
        //设置图标
        tabSession.style.backgroundImage = 'url(pic/消息.png)';
        tabFriend.style.backgroundImage = 'url(pic/用户2.png)';
        //让好友列表隐藏起来，会话列表显示
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }
    tabFriend.onclick = function () {
        //设置图标
        tabSession.style.backgroundImage = 'url(pic/消息2.png)';
        tabFriend.style.backgroundImage = 'url(pic/用户.png)';
        lists[0].classList = 'list hide';
        lists[1].classList = 'list';
    }
}

// 调用
initSwitchTab();

//显示登录用户名字
function getUserInfo() {
    $.ajax({
        type: "post",
        url: "/user/userInfo",
        success: function (result) {
            var data = result.data;
            //从服务器获取到数据
            //校验结果是否有效
            //如果结果无效，跳转登录页面
            //如果结果有效，则把用户名显示到界面上
            if (result.code != 200 || data == null) {
                alert("当前用户未登录");
                location.href = "login.html";
            }
            let userDiv = document.querySelector('.main .left .user');
            userDiv.innerHTML = data.username;
            userDiv.setAttribute("user-id", data.userId);


        }
    });
}

getUserInfo();

//获取好友列表
function getFriendList() {
    $.ajax({
        type: "get",
        url: "/user/getFriend",
        success: function (result) {
            var body = result.data;
            console.log(body);
            //通过属性定位
            let friendList = document.querySelector('#friend-list');
            //1. 先把之前的好友列表的内容清空
            friendList.innerHTML = '';
            for (let friend of body) {
                console.log(friend);
                //创建li标签
                let li = document.createElement('li');
                //将<h4>标签加入到li中
                li.innerHTML = '<h4>' + friend.friendName + '<h4>';
                // 把friendId也记录下来，已被后患，把这个id作为html自定义属性加到li标签上
                li.setAttribute('friend-id', friend.friendId);
                friendList.appendChild(li);

                //给每一个li标签定义一个点击事件
                li.onclick = function () {
                    clickFriend(friend)
                };
            }
        },
        error: function () {
            console.log("获取好友失败");
            location.href = "login.html";
        }
    });
};

getFriendList();

function clickFriend(friend) {
    //1. 判断当前的friend在会话列表中是否存在
    //使用一个单独的函数实现，如果存在这个会话，就返回li标签，如果不存在，就返回null'
    let sessionLi = findSessionByName(friend.friendName);
    //通过属性定位会话列表
    let sessionLiUL = document.querySelector('#session-list');
    if (sessionLi) {
        //2. 如果存在，标签页切换到会话列表，就把会话设置成选中状态，并且置顶
        //children[0]表示会话列表中的第一个会话
        //将session 插入到 第一个会话之前
        sessionLiUL.insertBefore(sessionLi, sessionLiUL.children[0]);
        //此处设置会话选中状态，获取历史消息，这个功能在clickSession中已经实现了，直接调用即可
        clickSession(sessionLi);
    } else {
        //3. 如果不存在，就创建个新的会话，既要创建新的li，也要给服务器发送一个请求，保存会话
        sessionLi = document.createElement('li');
        //构造li标签
        sessionLi.innerHTML = '<h3>' + friend.friendName + '<h3>' + '<p></p>';
        //把构造的标签置顶
        sessionLiUL.insertBefore(sessionLi, sessionLiUL.children[0]);
        //给新的li标签定义一个点击事件
        sessionLi.onclick = function () {
            clickSession(sessionLi);
        }
        sessionLi.click();

        //发送请求给服务器，让服务器对会话进行保存，并返回新增会话的id
        createSession(friend.friendId, sessionLi);
    }

    //4. 标签页切换到会话列表
    let tabSession = document.querySelector(".table .tab-session");
    tabSession.click();

}


function createSession(friendId, sessionLi) { 
    //发送请求
    $.ajax({
        type: "post",
        url: "/user/createSession?friendId=" + friendId,
        success: function (result) {
            if (result.code != 200) {
                alert("操作失败");
                return;
            }
            let body = result.data;
            //加入到li标签中
            sessionLi.setAttribute("message-session-id", body.sessionId);

        },
        error: function () {
            console.log("会话创建失败");
        }
    });
}


//获取会话列表
function getSessionList() {
    $.ajax({
        type: "get",
        url: "/user/getMessageSession",
        success: function (result) {
            console.log(result);
            //body是一个数组
            var body = result.data;

            //1.清空之前的会话列表
            let sessionList = document.querySelector('#session-list');
            sessionList.innerHTML = '';
            //2.遍历数组，构造页面
            for (let session of body) {
                //创建li标签
                let li = document.createElement('li');
                if(session.lastMessage.length > 10) {
                    session.lastMessage = session.lastMessage.substring(0, 10);
                }
                //把会话id保存在自定义属性中
                li.setAttribute("message-session-id", session.sessionId);
                // console.log(session.sessionId);
                // console.log(session.friends[0].friendName);
                li.innerHTML = '<h3>' + session.friends[0].friendName + '<h3>'
                    + '<p>' + session.lastMessage + '<p>';
                sessionList.appendChild(li);

                //给li标签定义一个点击事件
                li.onclick = function () {
                    //这个写法，能保证点击哪个li标签，此处对应的函数就可以拿到哪个li标签
                    clickSession(li);
                }

            }
        }
    });
}

getSessionList();


function findSessionByName(username) {
    // 先获取到会话列表中所有的li标签
    let sessionLis = document.querySelectorAll('#session-list>li');
    // 依次遍历，看看这些li标签中谁的还h3标签里的名字和参数一致
    for (let sessionLi of sessionLis) {
        //获取到该li标签中的h3标签
        let h3 = sessionLi.querySelector('h3');
        // 获取到h3中的名字与参数比较
        if (h3.innerHTML == username) {
            return sessionLi;
        }
    }
    return null;
}

function clickSession(currentLi) {
    //1.设置高亮
    //先获取所有的li标签
    let allLi = document.querySelectorAll('#session-list>li');
    activeSession(allLi, currentLi);

    //2.获取指定会话的历史消息
    //获取sessionId
    let sessionId = currentLi.getAttribute("message-session-id");
    //根据会话id回去会话历史消息
    getHistoryMessage(sessionId);
}

function activeSession(allLi, currentLi) {
    //遍历每个li，检查哪个是点击的li 
    //这里循环的目的更主要的是为了取消未被选中的li标签中的className
    for (let li of allLi) {
        if (li == currentLi) {
            li.className = 'selected';
        } else {
            li.className = '';
        }
    }
}


//创建一个webSocket实例
//let webSockt = new WebSocket("ws://127.0.0.1:8080/message");
let webSockt = new WebSocket("ws://"+ location.host +"/message");

//注册一些回调函数
//在java中使用webSocket是通过重写方法的方式进行使用
//而js中是通过给这些属性进行赋值时使用
//这里就表示在给onpen这个属性赋值时调用这个函数
webSockt.onopen = function() {
    console.log("webSocket 连接成功");
}

webSockt.onmessage = function(e) {
    console.log("webSocket 收到消息：" + e.data);
    //此时收到的消息是一个json字符串，需要转成js对象
    let resp = JSON.parse(e.data);
    if(resp.type == 'message') {
        //处理消息响应
        handleMessage(resp);

    }else {
        console.log("rest.type 不符合要求");
    }
}    

function handleMessage(resp) {
    //把客户端收到的消息给展示出来
    // 1. 根据响应中的sessionId查找到当前会话对应的li标签
    //    如果li标签不存在，则创建一个
    console.log("响应中的sessionId:" + resp.sessionId);
   let currentLi =  findSessionLi(resp.sessionId);
   if(currentLi == null) {
        //创建一个新的li标签，表示新的会话
        currentLi = document.createElement('li');
        currentLi.setAttribute('message-session-id', resp.sessionId);
        currentLi.innerHTML = '<h3>' + resp.fromName + '</h3>'
            + '<p></p>';
        // 给这个标签加上点击事件
        currentLi.onclick = function()  {
            clickSession(currentLi);
        }
   }
    // 2. 把新消息显示到当前会话的预览区域，(li标签里的p标签)
    let p = currentLi.querySelector('p');
    p.innerHTML = resp.content;
    
    // 3. 把收到消息的会话给置顶
    let sessionLisUL = document.querySelector('#session-list');
    sessionLisUL.insertBefore(currentLi, sessionLisUL.children[0]);

    // 4. 如果当前会话处于被选中状态，把当前消息放到消息列表中，并且滚动条处于最下的位置
   if(currentLi.className == 'selected') {
        //把消息列表添加一个新的消息
        let messageShowDiv = document.querySelector('.right .message-show');
        showMessage(resp, messageShowDiv);
        //滚动条滚动到最下面
        scrollBottom(messageShowDiv);
   }
}

webSockt.onerror = function() {
    console.log("webScoket 发生异常");
}

webSockt.onclose = function() {
    console.log("webSocket 断开连接");
}

//初始化发送按钮
function initSendButton() {
    //1. 先获取到按钮和消息输入框
    let sendButton = document.querySelector('.right .ctrl');
    let messageInput = document.querySelector('.right .message-input');
    //2. 给发送按钮定义一个点击事件
    sendButton.onclick = function() {
        //a.判断消息输入框是否有内容
        if(!messageInput.value) {
            console.log("输入框中没有内容");
            //不进行发送
            return;
        }else {
            //b. 获取到当前选中的li标签中的sessionId
            //通过查看哪个li标签中含有selected，从而获取到当前选中的标签，最后获取到id
            console.log(messageInput.value);
            let selectedLi = document.querySelector('#session-list .selected');
            if(!selectedLi) {
                //它可能为空，例如页面刚加载时
                console.log("selected标签为空")
                return;
            }
            let sessionId = selectedLi.getAttribute('message-session-id');
            //c. 构造请求
            let req = {
                type: "message",
                sessionId: sessionId,
                content: messageInput.value,
            }; 
            //此时这个请求就是一个object类型的，而webSockt.send(req)，需要的是一个String类型
            //所以就要将req这个对象转换成json字符串
            req = JSON.stringify(req);
            //d. 通过webSocket 发送
            webSockt.send(req);
            console.log("req发送成功");
            //发送完之后,清空输入框
            messageInput.value = '';
        }
    }
}
initSendButton();

function findSessionLi(targetSessionId) {
    //获取所有的li标签
    let sessionLis = document.querySelectorAll('#session-list li');
        for(let li of sessionLis) {
            //判断当前的li中的message-session-id与targetSessionId是否一样
            let sessionId = li.getAttribute('message-session-id');
            console.log("查找到的li标签的sessionId:" + sessionId);
            if(sessionId == targetSessionId) {
                return li;
            }
        }
        return null; //当新用户登录时，可能就没有现成的li
}

//获取指定会话的历史消息
function getHistoryMessage(sessionId) {
    //将右侧对话框中的内容及标题清空

    //选择标题标签并清空
    let titleDiv = document.querySelector('.right .title');
    titleDiv.innerHTML = '';
    //选择对话框标签并清空
    let messageShowDiv = document.querySelector('.right .message-show');
    messageShowDiv.innerHTML = '';
    //重新设置会话标题，因为，会话标题是在当前高亮的会话上显示，而高亮的会话都带有selected，
    //所以就可以定位，selected类中的h3标签
    let h3 = document.querySelector('#session-list .selected>h3');
    if (h3) {
        //h3可能不存在，因为，当页面刚加载时，就没有点击任何一个会话，此时，就没有会话设置selected
        //所以，就查询不到h3
        titleDiv.innerHTML = h3.innerHTML;
    }
    $.ajax({
        type: "get",
        url: "/user/getAllMessage?sessionId=" + sessionId,
        success: function (result) {
            if (result.code != 200 || result.data == null) {
                console.log("获取会话中的信息失败");
                return;
            }
            let body = result.data;
            console.log(body);
            for(let message of body) {
                //展示历史消息
                showMessage(message, messageShowDiv);
            }
            //对滚动条进行操作
            scrollBottom(messageShowDiv);
        }
    });
}

function scrollBottom(element){
    // 1. 获取对话框的高度
    let sayHeight = element.offsetHeight;
    // 2. 获取内容的总高度
    let contentHeight = element.scrollHeight;
    // 3. 进行滚动操作，第一个参数是水平方向的滚动，第二个参数是垂直方向的滚动
    element.scrollTo(0, contentHeight-sayHeight);
} 

function showMessage(message, messageShowDiv) {
    // console.log(message);
    //构造一个div表示一条消息
    let messageDiv = document.createElement('div');
    //此处需要判断当前的message中的fromName是不是当前用户，从来来决定消息是在左还是在右
    //获取当前用户名
    let curUser = document.querySelector('.left .user').innerHTML;
    // console.log(curUser);
    if (curUser == message.fromName) {
        //表示当前信息在右
        messageDiv.className = 'message message-right';
    } else {
        //表示当前信息在左
        messageDiv.className = 'message message-left';
    }
    //向messageDiv中填充内容
    messageDiv.innerHTML = '<div class="box">'
                            + '<h4>' + message.fromName + '</h4>'
                            + '<p>' + message.content + '</p>'
                            +'</div>';
    messageShowDiv.appendChild(messageDiv);
}




